<script setup lang="ts">
import { onMounted, ref } from "vue";
import { expand, getStore, newPage, openPath } from "../preload";
import IndexApi from "../api/index";
import words from "lodash-es/words";
const keyword = ref("");
const show = ref(false);
window.ipcRenderer.on("expand", (_: any, value: boolean) => {
    loadIndexs();
    show.value = value;
});
const inputRef: any = ref();
const loading = ref(true);
onMounted(() => {
    getStore("dataPath").then((value: string) => {
        onOpen(value);
    });
});
const onOpen = (path: string) => {
    IndexApi.open(path).then(() => {
        loading.value = false;
        loadIndexs();
    });
};
const indexs: any = ref([]);
const indexsFull: any = ref([]);
const loadIndexs = () => {
    IndexApi.indexs().then((res: any) => {
        indexsFull.value = res.data || [];
        searchIndex(keyword.value);
    });
};
const results: any = ref({});
const onInput = (value: string) => {
    searchIndex(value);
    let match = words(value, /[^:：，。、；’‘、·,./;'; ]+/g);
    let index = "";
    if (match.length > 0 && indexs.value.indexOf(match[0]) > -1) {
        index = match[0];
        match.splice(0, 1);
    }
    IndexApi.search({
        match: match,
        index: index,
    }).then((res: any) => {
        results.value = res.data;
    });
};
const clickIndex = (value: string) => {
    keyword.value = `${value} : `;
    inputRef.value!.input!.focus();
};

const searchIndex = (value: string) => {
    if (value == "") {
        indexs.value = indexsFull.value;
    }
    let items: any = [];
    for (let i = 0; i < indexsFull.value.length; i++) {
        let str1 = indexsFull.value[i].toLowerCase();
        let str2 = value.toLowerCase();
        if (str1.includes(str2) || str2.includes(str1)) {
            items.push(indexsFull.value[i]);
        }
    }
    indexs.value = items;
};
const onCreate = () => {
    newPage({
        title: "添加",
        width: 700,
        height: 600,
        hash: "create",
        query: {},
    });
};
const onShowDoc = (id: string, index: string) => {
    newPage({
        title: id,
        width: 700,
        height: 600,
        hash: "doc",
        resizable: true,
        query: { id: id, index: index },
    });
};
</script>
<template>
    <div class="w-screen h-screen flex flex-col">
        <div @click="expand" class="w-full max-h-full flex items-center justify-center" :class="show ? 'h-0':'win-h'"></div>
        <div v-show="show" class="flex-1 h-0 w-full flex flex-col">
            <div class="flex items-center gap-3 px-3 mt-3">
                <el-input ref="inputRef" :disabled="loading" v-model="keyword" @input="onInput" placeholder="ESearch" clearable />
                <el-button plain @click="onCreate">
                    <i class="iconfont icon-plus"></i>
                </el-button>
            </div>
            <el-scrollbar class="flex-1 h-0 px-3 mt-3">
                <div v-if="indexs.length > 0" class="flex flex-wrap gap-2 mb-3">
                    <el-button @click="clickIndex(item)" plain round size="small" class="!m-0" v-for="(item, index) in indexs" :key="index">{{ item }}</el-button>
                </div>
                <div v-if="keyword === ''"></div>
                <div v-else-if="results.total_hits > 0">
                    <div class="text-xs text-gray-400">{{ `Total: ${results.total_hits || 0}  Cost: ${results.cost || 0}` }}</div>
                    <div v-for="(item, index) in results.hits" :key="index" class="border-b mt-2">
                        <div class="flex items-start gap-2">
                            <div class="flex-1">
                                <el-link @click="onShowDoc(item.id, item.index)" :underline="false">{{ item.id }}</el-link>
                            </div>
                            <el-link @click="openPath(item.id)" :underline="false">
                                <i class="iconfont icon-open mx"></i>
                            </el-link>
                        </div>
                        <pre class="text-xs  p-2 leading-5 mt-1 whitespace-pre-wrap">
                            <code v-html="item.fragments.content"></code>
                        </pre>
                    </div>
                </div>
                <div v-else class="mt-10 text-gray-400 text-sm text-center">未查询到相关结果</div>
            </el-scrollbar>
        </div>
    </div>
</template>
<style scoped>
</style>
